<template>
  <div @click="visible = true">
    <slot>
      <a-input v-model="inputValue" placeholder="请选择BOM" />
    </slot>
  </div>
  <a-modal title="选择BOM" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>

    <div>
      <a-space>
        <a-input-search
          search-button
          v-model="searchForm.bomCode"
          :style="{ width: '220px' }"
          placeholder="产品BOM编码"
          @change="Search"
          @search="Search"
        />
        <a-select
          v-model="searchForm.state"
          placeholder="状态"
          :style="{ width: '220px' }"
          @change="Search"
        >
          <a-option :value="''"> 全部 </a-option>
          <a-option :value="1"> 启用 </a-option>
          <a-option :value="2"> 停用 </a-option>
        </a-select>
      </a-space>
    </div>
    <div style="height: 20px" />
    <tableTurn :tableData="getDemandAll" ref="tableRef">
      <a-table-column
        v-for="header in headerValues"
        :key="header.name"
        :width="header.width || 200"
        :title="header.name"
        :fixed="header.fixed"
        :data-index="header.code"
        align="center"
      >
        <template #cell="{ record }" v-if="!header.code">
          <template v-if="header.name === '状态'">
            <!-- '未启用', '启用', '停用' -->
            <a-typography-text type="success" v-if="record.state === 1">
              启用
            </a-typography-text>
            <a-typography-text type="danger" v-if="record.state === 2">
              停用
            </a-typography-text>
          </template>
        </template>
      </a-table-column>
      <a-table-column :width="80" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-space>
            <a-button type="text" @click="choice(record)"> 选择 </a-button>
          </a-space>
        </template>
      </a-table-column>
    </tableTurn>

    <HeaderSettingCopy
      v-model:headerValues="headerValues"
      :define-headers="ProductBomHerders.herders"
      :type="ProductBomHerders.type"
    >
      <span />
    </HeaderSettingCopy>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, useSlots, reactive } from 'vue';
  import { TWorkSerialGroup } from '@/api/FactoryModeling/type';
  import { GetProductBomPage } from '@/api/FactoryModeling';

  import { ProductBomHerders } from '@/utils/tableHerders';

  let searchForm = reactive<any>({
    state: 1,
  });
  const getDemandAll = async (page: any) => {
    try {
      let res = await GetProductBomPage({
        ...page,
        ...searchForm,
        historyState: 1,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      return Promise.resolve();
    }
  };

  let slots = useSlots();
  const props = withDefaults(
    //参数说明
    defineProps<{
      workSerialList?: TWorkSerialGroup[]; //tab显示的tab列表
      inputValue?: string;
    }>(),
    {
      workSerialList: () => [],
    }
  );

  let visible = ref(false);

  const tableRef = ref();
  const Search = () => {
    tableRef.value.loadData();
  };
  let emit = defineEmits(['choice']);
  let choice = async (item: TWorkSerialGroup) => {
    emit('choice', item);
    visible.value = false;
  };

  let headerValues = ref<any[]>([]);
</script>

<style scoped></style>
